<template>
  <el-card class="box">
    <div id="my-three-3d"></div>
  </el-card>
</template>

<script setup>
  import * as THREE from "three";
  import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
  import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";

  //创建一个三维场景
  const scene = new THREE.Scene();
  const width = window.innerWidth;
  const height = window.innerHeight;

  // 相机
  const camera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    1,
    500
  );
  camera.position.set(0, 0, 100);
  camera.lookAt(0, 0, 0);

  var geometry = new THREE.BoxGeometry(10, 10, 10); // 创建一个立方体
  var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 使用基础材质，设置颜色为绿色
  var cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  /* 创建一个WebGL渲染器 */
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(width, height); //设置渲染区尺寸
  renderer.render(scene, camera); //执行渲染操作、指定场景、相机作为参数

  const controls = new OrbitControls(camera, renderer.domElement); //创建控件对象
  controls.addEventListener("change", () => {
    renderer.render(scene, camera); //监听鼠标，键盘事件
  });

  onMounted(() => {
    document.getElementById("my-three-3d")?.appendChild(renderer.domElement);
  });
</script>

<style lang="scss" scoped>
  .box {
    width: 100%;
    height: 100%;
  }
</style>
